<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">文章归档</block>
		</cu-custom>
		
		<view class="cu-timeline" v-for="groupArticle in groupArticleList">
			<view class="cu-time">{{groupArticle.date}}</view>
			<view class="cu-item" v-for="article in groupArticle.list" @click="toArticleContent(article)">
				<view class="content shadow-blur ">
					<view class="cu-capsule radius ">
						<view class="cu-tag  sm" :class="article.type==1?'bg-green':article.type==2?'bg-cyan':'bg-orange'">{{article.type==1?'技术':article.type==2?'书集':'温玉'}}</view>
						<view class="cu-tag  sm" :class="article.type==1?'line-green':article.type==2?'line-cyan':'line-orange'">{{article.createTime}}</view>
					</view>
					<view class="margin-top-xs">{{article.title}}</view>
				</view>
			</view>
		</view>
		<view class="margin-tb">
			<u-loadmore icon-type="flower" :status="loadingStatus" bg-color="#fff" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleList:[],
				loadingStatus:'loadmore',
				queryParams: {
					current: 1,
					size: 10
				},
				total:0,
				pages:0,
				groupArticleList:[]
			};
		},
		onLoad() {
			this.pageArticle();
		},
		onReachBottom() {
			this.queryParams.current++;
			this.pageArticle();
		},
		methods:{
			pageArticle() {
				this.loadingStatus = 'loading';
				this.$u.api.pageArticle(this.queryParams).then(res => {
					if (this.queryParams.current == 1) {
						this.articleList = [];
					}
					res.data.records.forEach(e=>{
						e.dateFormat = this.$u.timeFormat(Date.parse(e.createTime), 'yyyy-mm');
						e.createTime = this.$u.timeFormat(Date.parse(e.createTime), 'yyyy-mm-dd hh:MM');
					})
					this.articleList = this.articleList.concat(res.data.records);
					this.groupArticle(this.articleList);
					this.total = res.data.total;
					this.pages = res.data.pages;
					if(this.pages<=this.queryParams.current){
						this.loadingStatus = 'nomore';
					}else{
						this.loadingStatus = 'loadmore';
					}
				});
			},
			groupArticle(list){
				let arr = [];
				list.map(e=>{
					let articleGroup = arr.find(data=>data.date == e.dateFormat);
					if(articleGroup){
						articleGroup.list.push(e);
					}else{
						arr.push({
							date:e.dateFormat,
							list:[e]
						})
					}
				})
				this.groupArticleList = arr;
			},
			toArticleContent(article){
				let url = 'pages/home/article_content/article_content';
				if(article.type == 2){
					url = 'pages/home/novel_content/novel_content';
				}
				if(article.type == 3){
					url = 'pages/home/poetry_content/poetry_content';
				}
				this.$u.route(url,{id:article.id});
			}
		}
	}
</script>

<style lang="stylus">
page
	background #fff
.cu-timeline>.cu-item>.content
	padding 18rpx
</style>
